<template>
  <!-- <div class="scalebox" :style="scaleboxs"> -->
  <dv-full-screen-container :style="resizeWarp">
    <div :style="bg" class="bg">
      <div class="resize" :style="scalebox">
        <div class="top">
          <div class="top-container">
            <span class="header-logo m-l-30" @click="goBack()">
              <!-- <img
                class="float-left"
                src="@/assets/media/image/light-logo.png"
                alt="..."
              /> -->
              <!-- <span class="logo-text float-left m-l-10">{{$t('global.title')}}</span> -->
            </span>
            <div style="margin-top:15px;margin-left:20px" v-if="buttonShow == 'true'">
              <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="rgba(255,255,255,0)"
                text-color="#fff"
                active-text-color="#87CEFA"
                router
                :default-active="$route.path"
              >
                <el-menu-item
                  v-for="(item, key) in list"
                  :index="item.pageUrl"
                  :key="key"
                  >{{ item.name }}
                  <div class="underline"></div
                ></el-menu-item>
                <!-- <el-menu-item @click="$router.push({ name: 'modules' })"
                  >模块选择
                  <div class="underline"></div
                ></el-menu-item> -->
              </el-menu>
            </div>
          </div>
          <span class="top-date"
            ><span>{{date}}</span><br /><span>{{time}}</span></span
          >
        </div>
        <header>
          <div class="header-left">
            <dv-decoration-2 style="width:33%;height:5px;" /><dv-decoration-8
              style="width:100%;height:50px;"
            />
          </div>
          <div class="header-center">
            <span class="logo-text  m-l-10">{{$t('global.title')}}</span>
          </div>
          <div class="header-right">
            <dv-decoration-2
              style="width:33%;height:5px;"
              class="header-line"
            /><dv-decoration-8
              :reverse="true"
              style="width:100%;height:50px;"
            />
          </div>
        </header>

        <div class="main"><router-view></router-view></div>
      </div>
    </div>
  </dv-full-screen-container>
</template>
<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  transition: 0.3s;
}
.resize {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  transition: all 0.3s;
}
.header-logo {
  cursor: pointer;
  align-items: center;
  display: flex;
}
.header-logo img {
  width: 70px;
}
.logo-text {
  line-height: 60px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 35px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.top {
  width: 100%;
  height: auto;
  padding-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.top-container {
  height: auto;
  display: flex;
  justify-content: space-around;
  margin-left: 80px;
}
.top-left {
  width: 40%;
  height: auto;
}
.top-left img {
  float: left;
}
.top-left h1 {
  margin-left: 20px;
  color: #cecdce;
}
.top-right {
  width: 60%;
  height: auto;
  display: flex;
  flex-direction: row;
}
.top-date {
  font-size: 27px;
  color: #cecdce;
}
header {
  width: 100%;
  height: auto;
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
header div {
  height: auto;
  color: #cecdce;
}
.header-left {
  width: 33%;
}
.header-center {
  text-align: center;
  width: 33%;
  font-size: 30px;
}
.effect {
  margin: 0 auto;
}
.header-right {
  width: 33%;
}
.header-right :not(p) {
  margin-left: auto;
}
.header-line {
  transform: rotateY(150deg);
  margin-right: -3%;
}
.main {
  width: 100%;
  height: calc(100% - 168px);
  margin-top: 10px;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: none !important;
}
.underline {
  width: 0;
  height: 2px;
  background-color: #87cefa;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.3s;
}
.el-menu-item {
  margin-right: 10px;
  position: relative;
  font-size: 30px;
  border-bottom: none;
  &:hover {
    background: rgba(255, 255, 255, 0) !important;
  }
}
.el-menu-item:hover .underline {
  width: 100%;
}
</style>
<script>
export default {
  components: {},
  data() {
    return {
      buttonShow:true,
      width: 1920,
      height: 1080,
      scalebox: {
        transform: "",
        marginLeft: null,
      },
      resizeWarp: {
        width: null,
        height: null,
      },
      scale: null,
      bg: {
        backgroundImage: "url(https://auxface-oss.oss-cn-shenzhen.aliyuncs.com/resource/bi-bg.png)"
      },
      list: [],
      timer:null,
      time:'',
      date:''
    };
  },
  methods: {
    goBack(){
      if(this.$router.go(-1) == undefined){
        $router.push({ name: 'modules' })
      }else{
        this.$router.go(-1)
      }
    },
    getScale() {
      const { width, height } = this;
      const wh = window.innerHeight / height;
      const ww = window.innerWidth / width;
      return ww < wh ? ww : wh;
    },
    getMargin() {
      const { width } = this;
      let margin = (window.innerWidth - 1920 * this.scale) / 2;
      return margin;
    },
    setScale() {
      this.scale = this.getScale();
      this.resizeWarp.width = window.innerWidth + "px";
      this.resizeWarp.height = window.innerHeight + "px";
      this.scalebox.transform = "scale(" + this.scale + ")";
      this.getMargin();
      this.scalebox.marginLeft = this.getMargin() + "px";
    },
    getMenuList(path) {
      var path = path.split("/"),
      list = sessionStorage.getItem(path[1] + "Aside");
      console.log(path[1]);
      
      this.list = JSON.parse(list);
    },
    ser() {
      this.timer = setInterval(this.getTime, 1000);
    },
    getTime() {
      let date = new Date(),
        y = date.getFullYear()+'年',
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月',
        D = date.getDate() + '日',
        h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours())+':',
        m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes())+':',
        s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds()),
        week=date.getDay(),
        weekStr = new Array("日","一", "二", "三", "四", "五", "六"),
        weekResult = '星期' + weekStr[week];
        this.date = y+M+D
        this.time = h+m+s+weekResult
    },
  },
  mounted() {
    this.buttonShow = process.env.VUE_APP_BASE_BOTTOM;
    if(this.buttonShow == "true") this.getMenuList(this.$route.path);
    this.setScale();
    window.addEventListener("resize", this.setScale);
    this.ser();
  },
  beforeDestroy(){
      clearInterval(this.timer)
  }
};
</script>
